<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { PaginationProps } from "@pureadmin/table";
import { reactive, ref } from "vue";
defineOptions({
  name: "OutsourcedProducts"
});
const loading = ref(false);
const form = ref({
  status: "0",
  time: new Date().toString()
});
const searchColumns: PlusColumn[] = [
  {
    label: "名称",
    prop: "name",
    fieldProps: {
      placeholder: "请输入名称"
    }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "未解决",
        value: "0",
        color: "red"
      },
      {
        label: "已解决",
        value: "1",
        color: "blue"
      },
      {
        label: "解决中",
        value: "2",
        color: "yellow"
      },
      {
        label: "失败",
        value: "3",
        color: "red"
      }
    ]
  },
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker"
  }
];
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const data = ref([
  {
    name: "张三",
    value: 10
  },
  {
    name: "里斯",
    value: 20
  }
]);
const columns = ref([
  {
    prop: "name",
    label: "名称"
  },
  {
    prop: "value",
    label: "数额"
  },
  {
    prop: "value",
    label: "数额"
  },
  {
    prop: "value",
    label: "数额"
  },
  {
    prop: "value",
    label: "数额"
  },
  {
    prop: "value",
    label: "数额"
  },
  {
    prop: "value",
    label: "数额"
  }
]);
const handleChange = () => {};
const handleSearch = () => {};
const handleRest = () => {};
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch
        v-model="form"
        searchText="搜索"
        resetText="重置"
        expand-text="展开"
        retractText="收起"
        :columns="searchColumns"
        :show-number="2"
        label-width="80"
        label-position="right"
        @change="handleChange"
        @search="handleSearch"
        @reset="handleRest"
      />
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable
        ref="tableRef"
        :loading="loading"
        border
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :data="data"
        :columns="columns"
        :pagination="pagination"
      />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}
.operate {
  margin-bottom: 20px;
}
</style>
